<template>
  <div>
    <nav-bar title="考勤统计">
      <template v-slot:right>
        <span @click="search">查询</span>
      </template>
    </nav-bar>
    <div class="AttendanceStatistics maxinBox">
      <van-cell title="统计时间" @click="onStatisticalTime" is-link :value="statisticalTime" />
      <van-popup v-model="showStatisticalTime" position="bottom" style="height: 40%">
        <van-datetime-picker
          v-model="currentDate"
          @confirm="statisticalConfirm"
          @cancel="showStatisticalTime = false"
          type="date"
          :title="$t('dashbord.workTypeInformation.chooseDate')"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </van-popup>
      <div class="backgroundfff" style="padding: 10px;">
        <div class="title">
          <div>出勤人员一览</div>
        </div>
        <van-row class="todayShow center">
          <van-col :span="8">
            <label style="color: #0E6BEB;">{{attendanceData.totalCount}}</label>
            <div class="color999 fontSize12">总人数</div>
          </van-col>
          <van-col :span="8">
           <label style="color: #00C553;">{{attendanceData.entryCount}}</label>
           <div class="color999 fontSize12">今日进场（人）</div>
          </van-col>
          <van-col :span="8">
            <label style="color: #853F9C;">{{attendanceData.presentRate}}%</label>
            <div class="color999 fontSize12">今日出勤率</div>
          </van-col>
          <van-col :span="8">
            <label style="color: #AE212B;">{{attendanceData.bowOutCount}}</label>
            <div class="color999 fontSize12">今日退场人数</div>
          </van-col>
          <van-col :span="8">
           <label style="color: #E64424;">{{attendanceData.illegalCount}}</label>
           <div class="color999 fontSize12">今日违章（人）</div>
          </van-col>
         <!-- <van-col :span="8">
            <label style="color: #D96320;">{{attendanceData.overTimeCount}}</label>
            <div class="color999 fontSize12">超时违章（人）</div>
          </van-col> -->
        </van-row>
      </div>
      <div class="marginTop5 plr10 backgroundfff">
        <van-row>
          <van-col :span="19">
            <div class="title">
              <div>今日工种出勤情况统计(单位:人)</div>
            </div>
          </van-col>
          <van-col :span="5" style="text-align: right;font-size: 0.75rem;padding: 0.9375rem;" @click="">
            <span @click="more">更多></span>
          </van-col>
        </van-row>
        <my-echarts id="myChat" :options="chatData"></my-echarts>
      </div>
      <div class="marginTop5 plr10 backgroundfff">
        <van-row>
          <van-col :span="24">
            <div class="title">
              <div>近七日出勤人数统计(单位:人)</div>
            </div>
          </van-col>
        </van-row>
        <my-echarts id="myChat1" :options="chatData1"></my-echarts>
      </div>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import MyEcharts from '../../../components/MyChart.vue'
  import attendanceAPI from '../../../api/workAPI/attendanceAPI.js'
  export default {
    components: {
      MyEcharts
    },
    data() {
      return {
        showStatisticalTime: false,
        statisticalTime: '',
        minDate: new Date(2015, 0, 1),
        maxDate: new Date(),
        currentDate: new Date(),
        attendanceData: {},
        chatData1: null,
        chatData: null
      }
    },
    methods:{
      getAttendanceData() {
        let projectId = localStorage.getItem('projectId')
        attendanceAPI.getAttendanceStatistical(projectId, this.statisticalTime).then(res => {
          this.attendanceData = res
          let workTypeList = res.workTypeList.map(item => {
            return item.categoryName
          })
          let workTypeCount = res.workTypeList.map(item => {
            return item.count
          })
          let lastDayDateList = res.last7DayList.map(item => {
            return item.workDate
          })
          let lastDayIllegalCount = res.last7DayList.map(item => {
            return item.illegalCount
          })
          let lastDayEnterCount = res.last7DayList.map(item => {
            return item.enterCount
          })
          this.chatData = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: workTypeList
            },
            series: [
                {
                    type: 'bar',
                    barWidth : 10,
                    data: workTypeCount
                }
            ]
          }
          this.chatData1 = {
            tooltip: {
                trigger: 'axis'
            },
           legend: {
                  data: ['出勤人数', '违章人数']
            },
            grid: {
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: lastDayDateList
            },
            yAxis: {
                type: 'value'
            },
            series: [
              {
                name: '出勤人数',
                type: 'line',
                itemStyle:{
                    normal:{
                        lineStyle:{
                            width:2,
                            type:'dotted'
                        }
                    }
                },
                data: lastDayEnterCount,
              },
              {
                name: '违章人数',
                type: 'line',
                data: lastDayIllegalCount,
              },
            ]
          }
        })
      },
      onStatisticalTime() {
        this.showStatisticalTime = true
      },
      // 进场日期选择确定按钮
      statisticalConfirm(val) {
       this.statisticalTime = moment(val).format('YYYY-MM-DD')
       this.showStatisticalTime = false
       this.getAttendanceData()
      },
      // 工种出勤统计
      more() {
        this.$router.push({
          name:'WorkTypeAttendance',
          params: {
            date: this.statisticalTime
          }
        })
      },
      search() {
        this.$router.push({
          path:'/SearchAttendance'
        })
      }
    },
    mounted() {
      this.getAttendanceData()
    }
  }
</script>

<style scoped lang="scss">
  .todayShow {
    label{
      font-size: 1.25rem;
    }
    .van-col{
      padding: 0.3125rem 0;
      div{
        width: 80%;
        margin: 0 auto;
        padding: 0.3125rem;
        background-color: #F3F3F3;
        color: #333333;
      }
    }
  }
  .title{
    padding: 0.625rem;
    font-size: 0.875rem;
    div{
      margin: 0.3125rem;
      border-left: 0.125rem solid #1577FF;
      padding-left: 0.3125rem;
    }
  }
</style>
